<template>
  <section class="con">
    <img src="./../image/pic12.png"
         alt=""
         class="toTop"
         @click="toTop"
         v-if="toTopShow">
    <div class="footer">
      <div class="d1">
        <p style="font-size:21px">Customer Service</p>
        <p class="thing">{{info.telPhone}}</p>
        <p class="thing">{{info.email}}</p>
        <img src="./../image/pic8.png"
             alt=""
             srcset="">
      </div>

      <div class="d2">
        <div class="pi1"
             id="pic12"
             v-if="erweimaShow">
          <img :src="imgs"
               class="ig1"
               alt="">
        </div>

        <p style="font-size:21px">Follow us</p>

        <div class="pointer"
             @mouseenter="focusUs(1)"
             @mouseleave="focusUsOut(1)">
          <img src="./../image/pic19.png"
               alt="">
          <span class="thing">Wechat</span>
        </div>
        <div class="pointer"
             @mouseenter="focusUs(2)"
             @mouseleave="focusUsOut(1)">
          <img src="./../image/pic18.png"
               alt="">
          <span class="thing">Weibo</span>
        </div>
        <div class="pointer"
             @mouseenter="focusUs(3)"
             @mouseleave="focusUsOut(1)">
          <img src="./../image/pic11.png"
               alt="">
          <span class="thing">Twitter</span>
        </div>
      </div>
      <div class="d3">
        <div class="pi11"
             id="pic12"
             v-if="erweimaShow2">
          <img :src="imgs"
               class="ig1"
               alt="">
        </div>
        <p style="font-size:19px"
           class="p1">Mobile banking <img src="./../image/erweima.png"
               @mouseenter="focusUs2(1)"
               @mouseleave="focusUsOut2(1)"
               class="img1 pointer"
               alt=""
               srcset=""></p>
        <img src="./../image/pic4.png"
             alt=""
             class="img2">
        <img src="./../image/pic6.png"
             alt=""
             class="img2">
      </div>
      <div class="d4">
        <p class="thing">Brief Introduction to Mobile Banking</p>
        <p class="thing">Convenient ·Quick ·Efficiency</p>
        <p class="thing">Anytime·Anywhere</p>
      </div>
      <div class="pp1">
        <span v-if="jude(info.statement)"><a :href="hrefDo(info.statement)"
             target="value"
             style="color:white">Disclaimer</a></span>
        <!-- <span v-if="jude(info.statement)">|</span> -->
        <span v-if="jude(info.privacy)"><a :href="hrefDo(info.privacy)"
             target="value"
             style="color:white">Privacy</a></span>
        <!-- <span v-if="jude(info.statement)||jude(info.privacy)">|</span> -->
        <span v-if="jude(info.protocol)"><a :href="hrefDo(info.protocol)"
             target="value"
             style="color:white">User Agreement</a></span>
        <!-- <span v-if="jude(info.statement)||jude(info.privacy)||jude(info.protocol)">|</span> -->
        <span style="color:red"
              v-if="jude(info.cookies)"><a :href="hrefDo(info.cookies)"
             target="value"
             style="color:red">Cookies</a></span>
      </div>
      <div class="pp1 pp2">
        <span v-if="jude(info.certificate)"><a :href="hrefDo(info.certificate)"
             target="value"
             style="color:white">Website security certificate</a></span>
        <span v-if="jude(info.regsterNumber)"><a :href="hrefDo(info.regsterNumber)"
             target="value"
             style="color:white">Public network</a></span>
        <span v-if="jude(info.icpRegisterNumber)"><a :href="hrefDo(info.icpRegisterNumber)"
             target="value"
             style="color:white">ICP</a></span>
        <span v-if="jude(info.copyright)"> {{hrefDo(info.copyright)}} </span>
        <span><i style="color:red;font-style: normal">Ruili bank</i></span>
      </div>
    </div>
  </section>
</template>

<script>

export default {
  name: "enFooters",
  data () {
    return {
      toTopShow: false,
      erweimaShow: false,
      erweimaShow2: false,
      info: {},
      imgs: "",
      show: localStorage.getItem("lang") == "en" ? false : true,
      link1: '',
      link2: "",
      link3: ""
    };
  },
  components: {

  },
  created () {
    window.addEventListener('scroll', this.scrollToTop);
    this.getSystemInfo()
  },
  methods: {
    hrefDo (v) {
      if (v.includes("#doshow")) {
        return v.split("#doshow")[0]
      } else {
        return v
      }
    },
    jude (v) {
      if (!v) {
        return false
      } else {
        return v.includes("doshow")
      }
    },
    getSystemInfo () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getSystemInfo,
          mode: "post",
          data: {

          }
        },
        function (suc) {
          self.info = suc.data;
        },
        function (err) {

        }
      );
    },
    focusUs (i) {
      this.imgs = i == 1 ? this.info.subscriptionCode : i == 2 ? this.info.weiboCode : this.info.customerServer
      this.erweimaShow = true
    },
    focusUsOut (i) {
      this.erweimaShow = false;
      this.imgs = ""
    },
    focusUs2 (i) {
      this.imgs = this.info.mobileBank
      this.erweimaShow2 = true
    },
    focusUsOut2 (i) {
      this.imgs = ""
      this.erweimaShow2 = false
    },
    scrollToTop () {
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      if (distance > 100) {
        this.toTopShow = true
      } else {
        this.toTopShow = false
      }
    },
    toTop () {
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      let step = distance / 50; //每步的距离
      (function jump () {
        if (distance > 0) {
          distance -= step;
          // document.documentElement.scrollTop = distance;
          // document.body.scrollTop = distance;
          window.scrollTo(0, distance);
          setTimeout(jump, 10)
        }
      })();
    }
  }
};
</script>

<style lang="scss" scoped>
.thing {
  font-weight: 300;
}
.pointer {
  cursor: pointer;
}
.con {
  min-width: 1300px;
  margin-top: 50px;
  flex: 1;
  background: #850c0c;
}
#pic12 {
  right: -60px !important;
}
.pi1,
.pi11 {
  padding: 8px;
  background: white;
  border-radius: 20px;
  position: absolute;
  width: 90px;
  height: 90px;

  border: 5px solid #9d0c0c;
  .ig1 {
    width: 100%;
    height: 100%;
  }
}
.pi1 {
  top: 30px;
  right: -2%;
}

.pi11 {
  width: 90px;
  height: 90px;
  bottom: 159px;
}
.toTop {
  position: fixed;
  bottom: 265px;
  right: 50px;
  z-index: 100;
  width: 40px;
}
.pp1 {
  font-size: 14px;
  color: white;
  position: absolute;
  top: 300px;
  right: 100px;
  span {
    margin-right: 10px;
  }
}
.pp2 {
  top: 320px;
}
.footer {
  min-height: 350px;
  background: #850c0c;
  display: flex;
  flex-direction: row;
  position: relative;
}
.d1 {
  width: 14.18%;
  margin-top: 40px;
  color: white;
  margin-left: 6.25%;
  margin-right: 17.5%;
  p {
    text-align: right;
    margin-bottom: 20px;
    font-size: 18px;
  }
  img {
    width: 40.55%;
    margin-top: 50px;
    margin-left: 44%;
  }
}
.d2 {
  width: 12.2%;
  margin-top: 40px;
  color: white;
  margin-right: 11.6%;
  position: relative;
  div {
    margin-top: 20px;
    display: flex;
    align-items: center;
    img {
      width: 35px;
      height: 26px;
    }
    span {
      font-size: 18px;
      margin-left: 23px;
    }
  }
}
.d3 {
  margin-top: 40px;
  width: 10.4%;
  position: relative;
  color: white;
  margin-right: 8%;
  .img1 {
    width: 24px;
    height: 24px;
    margin-left: 10px;
  }
  .p1 {
    display: flex;
    align-items: center;
  }
  .img2 {
    width: 69%;
    height: auto;
    margin-top: 20px;
  }
}
.d4 {
  width: 13%;
  margin-top: 88px;
  color: white;
  font-size: 18px;
  p {
    margin-bottom: 20px;
  }
}
// @media screen and (max-width: 1366px) {
//   .pi11 {
//     top: -38px;
//     right: -93px !important;
//   }
// }

// @media screen and (min-width: 1366px) {
//   .pi11 {
//     top: -38px;
//     right: -10% !important;
//   }
// }
</style>